<script setup lang="ts">
import { useRouterNavigation } from "@/router/utils";
const { go } = useRouterNavigation();
import { useStoreOrderDetail } from "./hook";
import { dealDataExcept } from "@/utils/common";
import titleIcon from "@/assets/other/title-icon.png";

// icons
import arrowLeft from "@iconify-icons/ep/arrow-left";
import dayjs from "dayjs";

defineOptions({
  name: "StoreOrderDetail"
});

const {
  loading,
  orderForm,
  goodsColumns,
  isStoreManager,
  getSummaries,
  stepIndex,
  stepList,
  getOrderStatus,
  handleOpt,
  upOrderGoods,
  getOrderDetail
} = useStoreOrderDetail();
</script>

<template>
  <div v-loading="loading" class="order-detail">
    <el-card class="w-full mb-[10px]" shadow="always">
      <div
        class="flex items-center cursor-pointer mb-5"
        style="font-size: 16px"
        @click.stop="go(-1)"
      >
        <IconifyIconOffline :icon="arrowLeft" class="mr-2" />
        <div class="order-title">
          <img :src="titleIcon" width="7" height="14" /> 订单信息
        </div>
      </div>
      <div class="header">
        <div>采购订单编号：{{ orderForm.storeOrderCode || "--" }}</div>
        <div class="ml-[25px]">
          下单时间：{{ dayjs(orderForm.gmtCreate).format("YYYY-MM-DD HH:mm") }}
        </div>
        <div class="ml-[25px]">
          到货仓库：{{ orderForm.receiveDepositoryName || "--" }}
        </div>
        <div class="ml-[25px]">
          创建人：{{ orderForm.createUserName || "--" }}
        </div>
      </div>
      <div class="status">
        <div class="s-left">
          <div class="status-text">
            {{ getOrderStatus(orderForm.suborderOrderStatus) }}
          </div>
        </div>
        <div class="s-right">
          <el-steps :active="stepIndex" finish-status="success">
            <el-step
              v-for="(item, index) in stepList"
              :key="index"
              :title="item.title"
              :description="item.description"
            />
          </el-steps>
        </div>
      </div>
      <div class="count">
        <div>
          订单总金额：<span class="number">{{
            dealDataExcept(orderForm.totalPrice)
          }}</span>
        </div>
        <div class="ml-[25px]">
          商品总数量：<span class="number">{{
            orderForm.totalCommodities
          }}</span>
        </div>
        <div class="ml-[25px]">
          发货总数量：<span class="number">{{
            orderForm.quantityShipped
          }}</span>
        </div>
        <div class="ml-[25px]">
          备注：<span class="number">{{ orderForm.des || "--" }}</span>
        </div>
      </div>
      <div class="goods-table">
        <pure-table
          row-key="id"
          align-whole="center"
          show-summary
          :summary-method="getSummaries"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          max-height="500"
          :data="orderForm.orderItemResponses"
          :columns="goodsColumns"
        />
      </div>
    </el-card>

    <!-- 发货信息 -->
    <el-card>
      <div class="order-title mb-5">
        <img :src="titleIcon" width="7" height="14" /> 发货信息
      </div>
      <el-collapse
        v-for="(item, index) in orderForm.billNoDetailResponses"
        :key="item.id"
        :model-value="0"
        class="dcollapse"
      >
        <el-collapse-item :name="index">
          <template #title>
            <div class="flex w-full" style="border-bottom: 1px solid #efefef">
              <div class="min-w-56 text-left">
                运单号: {{ item.comName || "--" }} {{ item.num }}
              </div>
              <div class="min-w-56 text-left ml-[25px]">
                创建时间:
                {{ dayjs(item.gmtCreate).format("YYYY-MM-DD HH:mm") }}
              </div>
              <div class="ml-[25px]">
                创建人: {{ item.createUserName || "--" }}
              </div>
            </div>
          </template>
          <div class="ml-2 mt-3">
            <el-steps
              v-if="item.itemList && item.itemList.length > 0"
              direction="vertical"
              :active="1"
              :space="60"
            >
              <el-step
                v-for="(items, indexs) in item.itemList"
                :key="indexs"
                :title="items.ftime"
                :description="items.context"
              >
                <template #icon>●</template>
              </el-step>
            </el-steps>
            <el-empty v-else description="暂无物流信息" :image-size="60" />
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-empty
        v-if="
          !orderForm.billNoDetailResponses ||
          orderForm.billNoDetailResponses.length == 0
        "
        class="m-auto"
        description="暂无发货信息~"
      />
    </el-card>
  </div>
</template>
<style>
.el-popconfirm__main {
  overflow-wrap: break-word;
  word-break: break-all;
}
</style>
<style lang="scss" scoped>
.order-detail {
  min-width: 1000px;
  font-size: 14px;
}
.el-form-item {
  margin-bottom: 10px;
}

.order-title {
  color: black;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  > img {
    margin-right: 8px;
  }
}

:deep(.dcollapse .el-collapse-item__content) {
  padding-bottom: 0;
}

:deep(.dcollapse .el-collapse-item__wrap) {
  border: none;
}

.header {
  color: #74714f;
  display: flex;
  padding: 15px 0;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}

.status {
  padding: 25px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  margin-bottom: 15px;
  .s-left {
    border-right: 1px solid #dcdfe6;
    padding: 0 70px 0 25px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .status-text {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
  .s-right {
    flex: 1;
    padding-left: 50px;
  }
}

.count {
  display: flex;
  margin-bottom: 15px;
  .number {
    color: red;
  }
}

.goods-table {
  border: 1px solid #dcdfe6;
  padding: 15px;
  border-radius: 8px;
}

:deep(.goods-table .el-table__footer-wrapper tfoot td.el-table__cell) {
  border-top: 1px solid #efefef;
  background-color: #fff;
}
</style>
